// 通用less生成常用类名模板 最终产物 ./less-to-css.css

.generateFontSize(@start,@end,@step) when ( @start <= @end ) {
  .fs-@{start} {
    font-size: ~"@{start}px";
  }
  .generateFontSize(@start+ @step, @end, @step);
}
.generateFontSize(10, 60, 2);

.generate-flex (@direction,@justify,@align) {
  display: flex;
  flex-direction: @direction;
  align-items: @align;
  justify-content: @justify;
}

.generate-align(@direction,@justify) {
  &s {
    .generate-flex(@direction, @justify, flex-start);
  }

  &c {
    .generate-flex(@direction, @justify, center);
  }

  &e {
    .generate-flex(@direction, @justify, flex-end);
  }

  &b {
    .generate-flex(@direction, @justify, baseline);
  }

  &sh {
    .generate-flex(@direction, @justify, stretch);
  }
}

.generate-justify(@direction) {
  &-s {
    .generate-align(@direction, flex-start);
  }

  &-c {
    .generate-align(@direction, center);
  }

  &-e {
    .generate-align(@direction, flex-end);
  }

  &-a {
    .generate-align(@direction, space-around);
  }

  &-b {
    .generate-align(@direction, space-between);
  }
}

.f {
  &-r {
    .generate-justify(row);
  }

  &-c {
    .generate-justify(column);
  }
}
//

.flex-wrap {
  flex-wrap: wrap;
}

.flex-nowrap {
  flex-wrap: nowrap;
}
